<template>
	<view class="food-detail-content">
		<Swiper style="width: 100%;height: 400rpx;" :styleObj="{width:'100%',height:'400rpx',borderRadius:0}" :list="banner"></Swiper>
		<CustomNav :custom="custom" :isBack="true" :backColor="'#fff'" :title="detail.name" :topBgColor="topBgColor" :color="titleColor"></CustomNav>
		<view class="info-block name-block">
			<view class="name">{{detail.name}}</view>
			<view class="score-block">
				<view class="iconfont icon-shoucang"></view>
				<view class="score">{{detail.score}}</view>
			</view>
			<view class="describe">{{detail.description}}</view>
			<view class="label-block">
				<view v-for="(item,index) in detail.type" class="label-item">{{item}}</view>
			</view>
		</view>
		<view class="info-block phone-block">
			<view @click="callPhone(detail.contact_phone)" class="item">
				<view class="iconfont icon-dianhua"></view>
				<view style="width:calc(100% - 130rpx);" class="value">{{detail.contact_phone}}</view>
				<view style="margin: 0;font-size: 28rpx;color:#999;font-weight: normal;" class="iconfont icon-youjiantou"></view>
			</view>
			<view class="item">
				<view class="iconfont icon-shijian"></view>
				<view class="value">{{detail.start_time}} - {{detail.end_time}}</view>
			</view>
			<view @click="openMap" class="item">
				<view class="iconfont icon-dingwei"></view>
				<view style="width:calc(100% - 130rpx);" class="value">{{detail.addr_name}}</view>
				<view style="margin: 0;font-size: 28rpx;color:#999;font-weight: normal;" class="iconfont icon-youjiantou"></view>
			</view>
		</view>
		<view class="info-block introduce-block">
			<view class="block-title">简介</view>
			<block v-if="detail.content">
				<view :class="more?'':'fewer'" class="block-content">
					<mp-html :content="detail.content"></mp-html>
				</view>
				<view @click="more=!more" class="more">{{more?'收起全文':'查看全文'}}</view>
			</block>
			<view v-else class="block-content">暂无</view>
		</view>
		<view v-if="detail.foods.length>0&&category==1" class="info-block food-block">
			<view class="block-title">特色菜</view>
			<view class="block-content">
				<view v-for="(item,index) in detail.foods" :key="item.id" >
					<navigator hover-class="none" :url="'/pages/common/foodDetail?id='+item.id" class="food-item" v-if="item.files[0]">
					<image  :src="item.files[0].url" class="photo"></image>
					<view class="name">{{item.name}}</view>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getDetail} from '@/api/comprehensive.js';
	export default{
		data(){
			return{
				custom:null,
				detail:{
					foods:[]
				},
				banner:[],
				titleColor:'rgba(0,0,0,0)',
				topBgColor:'rgba(0,0,0,0)',
				more:false,
				category:null,
			}
		},
		methods:{
			callPhone(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				})
			},
			openMap(){
				const longitude=this.detail.longitude*1;
				const latitude=this.detail.latitude*1;
				const name=this.detail.addr_name;
				const address=this.detail.addr_text;
				uni.openLocation({
					longitude,
					latitude,
					name,
					address,
					fail:(res)=>{
						this.utils.showToast('操作失败');
					}
				})
			},
			getDetailData(id){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				getDetail({id}).then((res)=>{
					uni.hideLoading();
					if(res.status==1){
						this.detail=res.data;
						this.banner=res.data.files;
					}else{
						this.utils.showToast(res.message,()=>{
							uni.navigateBack()
						})
					}
				}).catch((res)=>{
					uni.hideLoading()
					this.utils.showToast('加载失败，请重试',()=>{
						uni.navigateBack()
					})
				})
			}
		},
		onLoad(e) {
			this.custom=this.utils.getCustomNavData();
			this.getDetailData(e.id);
			this.category=e.category;
		},
		onPageScroll(e) {
			if(e.scrollTop>=90){
				this.topBgColor='#32CCCA';
				this.titleColor='#fff';
			}else{
				this.topBgColor='rgba(0,0,0,0)';
				this.titleColor='rgba(0,0,0,0)';
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100vh;
		background: #F6F6F6;
	}
	
	.food-detail-content{
		width: 100%;
		.info-block{
			background: #fff;
			margin-bottom: 10rpx;
			position: relative;
			padding: 30rpx;
		}
		.info-block.name-block{
			margin-top: -40rpx;
			border-radius: 40rpx 40rpx 0 0;
			display: flex;
			flex-direction:column;
			.describe{
				margin-top: 20rpx;
				font-size: 26rpx;
				color: #999;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
			}
			.label-block{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				margin-top: 20rpx;
				.label-item{
					background: #DDFDFE;
					color: $uni-color-primary;
					font-size: 24rpx;
					padding: 5rpx 10rpx;
					margin-bottom: 16rpx;
					margin-right: 16rpx;
					border-radius: 12rpx;
				}
			}
			.name{
				font-size: 48rpx;
				font-weight: bold;
				margin-top: 20rpx;
			}
			.score-block{
				display: flex;
				margin-top: 20rpx;
				align-items: center;
				.iconfont{
					color: #FD8249;
					font-size: 28rpx;
					margin-right: 20rpx;
				}
				.score{
					font-size: 30rpx;
					font-weight: bold;
				}
			}
		}
		.info-block.phone-block{
			display: flex;
			flex-direction: column;
			padding: 20rpx 30rpx;
			.item{
				width: 100%;
				border-bottom: 1px solid #efefef;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 20rpx 0;
				.iconfont{
					width: 60rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 34rpx;
					font-weight: bold;
					margin-right: 10rpx;
				}
				.value{
					width: calc(100% - 130rpx);
					display: flex;
					align-items: center;
					font-size: 30rpx;
				}
			}
			.item:last-child{
				border: none;
			}
		}
		.info-block.introduce-block{
			display: flex;
			flex-direction: column;
			.block-title{
				font-size: 34rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}
			.more{
				color: $uni-color-primary;
				font-size: 30rpx;
				text-align: right;
			}
			.block-content.fewer{
				display: flex;
				max-height: 300rpx;
				overflow: hidden;
			}
		}
		.info-block.food-block{
			display: flex;
			flex-direction: column;
			.block-title{
				font-size: 34rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}
			.block-content{
				
				
				.food-item{
					display: flex;
					flex-direction: column;
					flex: none;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					.photo{
						height: 431rpx;
						width: 690rpx;
						border-radius: 10rpx;
					}
					.name{
						position: absolute;
						font-size: 30rpx;
						margin-left: 20rpx;
						color: #fff;
						font-weight: bold;
						padding-bottom: 20rpx;
						padding-top: 50%;
					}
				}
			}
		}
	}
</style>